<script lang="ts" setup name="systemButton">
import type { DictionaryType } from '@/index.d';
import DictionaryTypesTree from './DictionaryTypesTree.vue';
import DictionaryValuesTable from './DictionaryValuesTable.vue';
import { useElementSize } from '@vueuse/core';
import { dictionartTypeList } from './dictionaryType';

const currentDictionaryType = reactive<DictionaryType>({
  tenant: dictionartTypeList[0].tenant === undefined ? 1 : dictionartTypeList[0].tenant,
  typeText: dictionartTypeList[0].typeText === undefined ? '' : dictionartTypeList[0].typeText,
  typeCode: dictionartTypeList[0].typeCode === undefined ? '' : dictionartTypeList[0].typeCode,
  state: dictionartTypeList[0].state === undefined ? true : dictionartTypeList[0].state
});

// 用于控制卡片内容器的高度
const detailCardRef = ref();
const { height } = useElementSize(detailCardRef);
</script>
<template>
  <div class="wrapper">
    <el-card class="tree thin-card">
      <template #header>字典类型树</template>
      <template #default>
        <DictionaryTypesTree v-model:current-dictionary-type="currentDictionaryType" />
      </template>
    </el-card>
    <el-card class="detail thin-card" ref="detailCardRef">
      <template #header>{{ currentDictionaryType.typeText }}</template>
      <template #default>
        <div ref="detailCardRef">
          <DictionaryValuesTable v-model:current-dictionary-type="currentDictionaryType" />
        </div>
      </template>
    </el-card>
  </div>
</template>
<style lang="scss" scoped>
.wrapper {
  height: 100%;
  display: flex;

  .tree {
    flex: 1;
  }

  .detail {
    flex: 5;
    display: flex;
    flex-direction: column;
    :deep(.el-card__body) {
      flex: 1;
      > div {
        height: 100%;
      }
    }
  }
}
</style>
